<template>
  <div class="section-wrap" style="padding-top: 40px">
    <!-- 头部 -->
    <div class="headerBox">
      <div class="header">
        <x-icon type="ios-arrow-left" size="" class="icon-white" @click="goBack"></x-icon>
        违章记分通知书
      </div>
    </div>
    <div class="gap_div">
      <ul class="gap_list" >
        <li
          @click="$router.push({path:'/safetyInspection',query:{recordId:$route.query.recordId,name:'下发安全稽查违章记分通知书',departId:$route.query.departId,leaderId:$route.query.leaderId}})">
          <!--<span class="checkBox active"></span>-->
          <p>安全稽查违章记分通知书</p>
          <i>{{jfcount}}</i>
          <x-icon type="ios-arrow-right" size="22" class="icon-right"></x-icon>
        </li>
        <li
          @click="$router.push({path:'/safetyInspection',query:{recordId:$route.query.recordId,name:'下发专业安全检查违章记分通知书',departId:$route.query.departId,leaderId:$route.query.leaderId}})">
          <!-- <span class="checkBox"></span>-->
          <p>专业安全检查违章记分通知书</p>
          <i>{{jccount}}</i>
          <x-icon type="ios-arrow-right" size="22" class="icon-right"></x-icon>
        </li>
      </ul>
      <!-- <ul class="gap_list" v-if="jfcount>0 && jccount==0">
        <li
          @click="$router.push({path:'/safetyInspection',query:{recordId:$route.query.recordId,name:'下发安全稽查违章记分通知书',departId:$route.query.departId}})">
          <p>安全稽查违章记分通知书</p>
          <i>{{jfcount}}</i>
          <x-icon type="ios-arrow-right" size="22" class="icon-right"></x-icon>
        </li>
      </ul>
      <ul class="gap_list" v-if="jfcount==0 && jccount>0">
        <li
          @click="$router.push({path:'/securityCheck',query:{recordId:$route.query.recordId,name:'下发专业安全检查违章记分通知书'}})">
          <p>专业安全检查违章记分通知书</p>
          <i>{{jccount}}</i>
          <x-icon type="ios-arrow-right" size="22" class="icon-right"></x-icon>
        </li>
      </ul> -->
    </div>
    <!--  <div class="btnsBox">
          <a class="saveBtn">确 定</a>
      </div>-->
  </div>
</template>
<script>
  export default {
    data() {
      return {
        isDisabled: true, // 是否禁止输入
        jfcount: 0,
        jccount: 0
      }
    },
    components: {},
    created() {
      this.getInfo()
    },
    methods: {
      goBack() {
        this.$router.go(-1)
      },
      getInfo() {
        this.$axiosAjax.checkNotice({recordId: this.$route.query.recordId}).then((res) => {

          if (res.data.success == true) {
            this.jfcount = res.data.result.jfcount;
            this.jccount = res.data.result.jccount;
          }
        }).catch(
          (err) => {

          }
        )
      }
    }
  }
</script>
<style lang="less" scoped>
  .gap_div {
    background: #fff;
    .gap_list {
      margin-left: 20px;
      li {
        padding: 16px 20px 16px 0;
        border-bottom: 1px solid #ebeef2;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .checkBox {
          display: block;
          height: 15px;
          width: 15px;
          background-repeat: no-repeat;
          background-image: url("/static/images/checkbox.png");
          background-size: 15px 15px;
        }
        .checkBox.active {
          background-image: url("/static/images/checked.png");
        }
        p {
          line-height: 22px;
          font-size: 14px;
          font-weight: bold;
          width: 80%;
        }
        .vux-x-icon {
          fill: #999;
          float: right;
        }
        > i {
          display: block;
          height: 15px;
          width: 15px;
          float: right;
          font-size: 12px;
          color: #fff;
          border-radius: 50%;
          background: #469b7a;
          line-height: 17px;
          text-align: center;
          text-indent: 0;
        }
      }
    }
  }

  .btnsBox {
    padding: 40px 20px 55px;
    justify-content: center;
    display: flex;
    background: #fff;
    a {
      height: 40px;
      border-radius: 20px;
      display: inline-block;
      width: 200px;
      text-align: center;
      line-height: 44px;
      color: #fff;
    }
    .saveBtn {
      background: #469b7a;
    }
  }
</style>
